<template>
  <div class="main">
    <div class="product">
      <ProductItem :product="info" :hasDel="false" :hasPrice="true" type="applyrecord"/>
      <div class="footer">
        <span>购买时间：{{info.create_time}}</span>
        <button type="button" class="handleBtn gray">已开票</button>
      </div>
    </div>
    <div class="info">
      <Field type="custom" label="抬头">
        <span class="area">{{info.taitou}}</span>
      </Field>
      <Field type="custom" label="税号">
        <span class="area">{{info.shuihao}}</span>
      </Field>
      <Field type="custom" label="联系人">
        <span class="area">{{info.name}}</span>
      </Field>
      <Field type="custom" label="手机号">
        <span class="area">{{info.mobile}}</span>
      </Field>
      <Field type="custom" label="寄送地址">
        <span class="area">{{address}}</span>
      </Field>
      <Field type="custom" label="门牌地址">
        <span class="area">{{info.street}}</span>
      </Field>
    </div>

    <OrderInfo :item="info"/>
  </div>
</template>

<script>
import api from '../../api'
import common from '../../api/common'
import ProductItem from "@/components/product/ProductItem";
import OrderInfo from "@/components/order/OrderInfo";
import Field from "@/components/buyrecord/Field";

export default {
  title: "开票信息详情",
  bodyClass: "gray-bg",
  components: {
    ProductItem,
    Field,
    OrderInfo
  },
  data() {
    return {
      order_sn: common.getParam('id'),
      info: {},
    };
  },
  computed: {
      address() {
        return `${this.info.contact_province}-${this.info.contact_city}-${this.info.contact_dist}`
      }
    },
  methods: {
    getTicketInfo() {
      api.usercenter.getBuyRecordTicketInfo(this.order_sn, res => {
        this.info = res

      })
    }
  },
  mounted () {
    this.getTicketInfo()
  },
};
</script>

<style lang="less" scoped>
.product {
  width: 92vw;
  margin: 3vw auto;
  background: #fff;
}
.info {
  width: 92vw;
  margin: 3vw auto;
  padding: 0 4vw;
  background: #fff;
}

.footer {
  padding: 5vw 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;

  span {
    color: #999;
  }
}
</style>